<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="/layui/css/layui.css">
        <link rel="stylesheet" type="text/css" href="/css/index.css">
        <script src="/layui/layui.js" type="text/javascript" charset="UTF-8"> </script>
        <title>Document</title>
        <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
        <script src="js/echarts.js"></script>
        <script src="js/index.js"></script>
    </head>
    <style>
    </style>

    <body>
        <div class="layui-fluid" style="height: 1010px; width: 100%;">
            <div class="layui-row-md1" style="height: 1010px; width: 100%;">
                <div class="layui-col-md3 " style="height: 80%; width: 20%; top: 60px;">
                    <div class="number" id="peo">
                        <h4>核查人员分析</h4>
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <span>辆次</span>
                    </div>


                    <div class="layui-row row3  " style="margin-top: 10px;">
                        <span style="display: block;position: relative;top: 5%; left: 40%; font-size: 17px;">通行车辆</span>
                        <span style="display: block;position: relative;top: 30%; left: 7%; font-size: 17px;">未检车辆</span>
                        <span style="display: block;position: relative;top: 3%; left: 40%; font-size: 17px;">已检车辆</span>
                        <span
                            style="display: block;position: relative;top: -26%; left: 73%; font-size: 17px;">中标车辆</span>

                    </div>
                    <div class="layui-row row4 " style="margin-top: 10px;">
                        <div class="layui-col-md2" id="main" style="width: 40%;height: 130%;"></div>
                        <div class="layui-col-md2" id="main1" style="width: 60%;height:130%;"></div>
                    </div>
                    <div class="layui-row row5" style="margin-top: 10px;">
                    <table class="box">
                            <tr>
                                <!-- th在这里也是一列的意思,它与td的区别在于th相当于是一种表头,可以通过效果图粗略看出,有个加粗的效果。 -->
                                <th>分类</th>
                                <th>未核查车辆分析</th>
                                <th>已核查车辆分析</th>
                                <th>核查车辆分析</th>
                            </tr>
                            <tr>
                                <td class="left"> 一级车</td>
                                <td> 1 100.0%</td>
                                <td> 1 100.0%</td>
                                <td> 2 100.0%</td>
                            </tr>
                            <tr>
                                <td class="left">二级车</td>
                                <td> 0 0.0%</td>
                                <td> 0 0.0%</td>
                                <td> 0 0.0%</td>
                            </tr>
                            <tr>
                                <td class="left">三级车</td>
                                <td> 0 0.0%</td>
                                <td> 0 0.0%</td>
                                <td> 0 0.0%</td>
                            </tr>
                            <tr>
                                <td class="left">未定级</td>
                                <td> 0 0.0%</td>
                                <td> 0 0.0%</td>
                                <td> 0 0.0%</td>
                            </tr>
                    </table>
                    </div>
                    <div class="number" id="peo">
                        <h4>核查人员分析</h4>
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                        <span>人次</span>

                    </div>
                    <div class="layui-row  row6" style="margin-top: 10px;">
                        <span style="display: block;position: relative;top: 5%; left: 40%; font-size: 17px;">通行车辆</span>
                        <span
                            style="display: block;position: relative;top: 31%; left: 14%; font-size: 17px;">中标人员</span>

                        <span style="display: block;position: relative;top: 4%; left:66%; font-size: 17px;">正常人员</span>
                    </div>
                    <div class="layui-row  row7" style="margin-top: 10px;">
                        <div class="layui-col-md1" style="width: 30%; height: 90px;">
                            <span
                                style="display: block;position: relative;top: 40%; left: 1%; font-size: 12px;">中标人员</span>
                            <span
                                style="display: block;position: relative;top: 100%; left: 1%; font-size: 12px;">正常人员</span>
                        </div>
                        <div class="layui-col-md1" id="main2" style="width: 70%;height:180%;"></div>
                    </div>
                    <div class="layui-row  row8" style="margin-top: 10px;">
                        <div class="layui-row" style="margin-top: 10px;">
                            <div class="layui-col-md1 xiao" style="background-image: url(/img/sj.png);"></div>
                            <div class="layui-col-md1 xiao1">
                                <span>&nbsp;0</span><span>0%</span>
                            </div>&nbsp;
                            <div class="layui-col-md1 xiao" style="background-image: url(/img/sf.png);"></div>
                            <div class="layui-col-md1 xiao1">
                                <span>&nbsp;0</span>
                                <span>0%</span>
                            </div>
                            <div class="layui-col-md1 xiao" style="background-image: url(/img/sd.png);"></div>
                            <div class="layui-col-md1 xiao1">
                                <span>&nbsp;0</span><span>0%</span>
                            </div>
                        </div>
                        <div class="layui-row" style="margin-top: 10px;">
                            <div class="layui-col-md1 xiao" style="background-image: url(/img/wt.png);"></div>
                            <div class="layui-col-md1 xiao1">
                                <span>&nbsp;0</span><span>0%</span>
                            </div>
                            <div class="layui-col-md1 xiao" style="background-image: url(/img/jsb.png);"></div>
                            <div class="layui-col-md1 xiao1">
                                <span>&nbsp;0</span><span>0%</span>
                            </div>
                            <div class="layui-col-md1 xiao" style="background-image: url(/img/qt.png);"></div>
                            <div class="layui-col-md1 xiao1">
                                <span>&nbsp;0</span><span>0%</span>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="layui-col-md3 " style="height: 80%; width: 60%; ">
                    <div class="layui-row  row9" style="margin-top: 10px;">
                        <input type="button" value="选择日期">
                        <img src="img/center_logo.png" alt="">
                        <div><span>站点启用率<li style="position: relative; left: -30px;">100.0%</li></span></div>
                        <div><span>检查站&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li>31个</li></span></div>
                        <div><span>安检设备<li>&nbsp;&nbsp;&nbsp;79台</li></span></div>
                        <input type="button" value="卡口预警">
                    </div>
                    <div id="allmap">
                            <span></span>
                    </div>
                </div>
                <div class="layui-col-md3 " style="height: 80%; width: 10%; top: 60px; margin: 0 10px;">
                    <div class="layui-row row10" style="margin-top: 10px;">
                        <p>重点人群预警</p>
                        <ul>
                            <li>
                                <div class="red"></div>
                                <img src="/img/R-C.jpg" alt="" >
                                <ul>
                                    <li>王雪婷</li>
                                    <li>210112198502150014</li>
                                    <li>滨海大道检查站</li>
                                    <li>2022-06-29 08:16:50</li>
                                </ul>

                            </li>
                            <li>
                                <div class="red"></div>
                                <img src="/img/R-b.jpg" alt="" >
                                <ul>
                                    <li>王雪婷</li>
                                    <li>3027638938</li>
                                    <li>圣诞岛</li>
                                    <li>2002 12 19 00:00:00</li>
                                </ul>

                            </li>
                            <li>
                                <div class="red"></div>
                                <img src="/img/R-a.jpg" alt="" >
                                <ul>
                                    <li>王雪婷</li>
                                    <li>3027638938</li>
                                    <li>圣诞岛</li>
                                    <li>2002 12 19 00:00:00</li>
                                </ul>

                            </li>
                            <li>
                                <div class="red"></div>
                                <img src="/img/R-q.png" alt="" >
                                <ul>
                                    <li>王雪婷</li>
                                    <li>3027638938</li>
                                    <li>圣诞岛</li>
                                    <li>2002 12 19 00:00:00</li>
                                </ul>

                            </li>
                            <li>
                                <div class="red"></div>
                                <img src="/img/R-w.jpg" alt="" >
                                <ul>
                                    <li>王雪婷</li>
                                    <li>3027638938</li>
                                    <li>圣诞岛</li>
                                    <li>2002 12 19 00:00:00</li>
                                </ul>

                            </li>
                        </ul>
                    </div>

                    <div class="layui-row row-last" style="margin-top: 10px;">

                        <p>重点车辆预警</p>
                        <ul>
                            <li>
                                <img src="img/key-car.png" style="float: left;" alt="">
                                <ul>
                                    <li>冀CD27766&nbsp;&nbsp;&nbsp;02</li>
                                    <li>昌黎东出口检查站</li>
                                    <li>2022-11-13&nbsp;21:39:55</li>
                                </ul>
                            </li>
                            <li>
                                <img src="img/key-car.png" style="float: left;" alt="">
                                <ul>
                                    <li>冀CD27766&nbsp;&nbsp;&nbsp;02</li>
                                    <li>昌黎东出口检查站</li>
                                    <li>2022-11-13&nbsp;21:39:55</li>
                                </ul>
                            </li>
                            <li>
                                <img src="img/key-car.png" style="float: left;" alt="">
                                <ul>
                                    <li>冀CD271613&nbsp;&nbsp;&nbsp;02</li>
                                    <li>昌黎东出口检查站</li>
                                    <li>2022-11-13&nbsp;21:39:55</li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
            <div class="layui-row-md1 las1" style="height: 1%; width: 1000px;">
                <img src="/img/ligtht-green.png" alt=""><span>统一用户管理服务</span> 
                <img src="/img/ligtht-green.png" alt=""><span>数据汇聚中心服务</span>
                <img src="/img/ligtht-green.png" alt=""><span>案件查控服务</span>
                <img src="/img/ligtht-green.png" alt=""><span>地理信息系统服务</span>
            </div>
        </div>
    </body>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        option = {
            grid: {
                left: '60',
                top: '-10'
            }, textStyle: {
                fontSize: '12',
                color: '#ccc'
            },
            height: '90%',
            width: '60%',
            yAxis: {
                data: ['中标车辆', '已检车辆', '未检车俩'],
                splitLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: true },
                axisLine: { show: false }
            },
            xAxis: {

                splitLine: { show: false },
                axisTick: { show: false },
                axisLabel: { show: false },
                axisLine: { show: false }
            },
            series: [
                {
                    barWidth: '20%',
                    type: 'bar',
                    data: [
                        10,
                        10,
                        ,
                    ],
                    itemStyle: {
                        barBorderRadius: 5,
                        borderWidth: 1,
                        borderType: 'solid',
                        borderColor: '#73c0de',
                        shadowColor: '#5470c6',
                        shadowBlur: 3
                    }
                }
            ]
        };
        myChart.setOption(option);
    </script>
    <script>
        var myChart1 = echarts.init(document.getElementById('main1'));
        option = {

            legend: {
                textStyle: {
                    fontSize: '12',
                    color: '#ccc'
                }, top: 20,
                x: 'right',
                orient: 'vertical',
                top: '4',
                data: ['一级车', '二级车', '三级车', '未定级']
            }, height: '100%',width : '100%',
            series: [
                {
                    type: 'pie',
                    radius: ['55%', '70%'],
                    avoidLabelOverlap: false,

                    label: {
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    data: [
                        { value: 335, name: '一级车' },
                        { value: 0, name: '二级车' },
                        { value: 0, name: '三级车' },
                        { value: 0, name: '未定级' },
                    ],
                    center: ['100', '55']
                }
            ]
        }; myChart1.setOption(option);

        var myChart2 = echarts.init(document.getElementById('main2'));
        option = {
            legend: {
                textStyle: {
                    fontSize: '12',
                    color: '#ccc'
                },
                orient: 'vertical',
                x: 'right',
                
                data: ['涉军', '设访', '涉毒', '王涛', '精神病', '其他'],
                height: '100%'
            }, height: '100%',width: '100%',
            series: [
                {
                    type: 'pie',
                    radius: ['60%', '80%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    labelLine: {
                        show: false
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    data: [
                        { value: 335, name: '涉军' },
                        { value: 310, name: '设访' },
                        { value: 234, name: '涉毒' },
                        { value: 135, name: '王涛' },
                        { value: 1548, name: '精神病' },
                        { value: 15, name: '其他' },
                    ], center: ['140', '70']
                }
            ]
        }; myChart2.setOption(option);
    </script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=67jMQ5DmYTe1TLMBKFUTcZAR"></script>


</html>